<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        .grid {
            display: flex;
            justify-content: space-around;
            margin: 10px;
        }

        .grid-cell {
            padding: 20px;
            text-align: left;
            flex: 1 1 auto;
            background-color: greenyellow;
            border-radius: 10px;
            margin: 0 10px 0px 0;
        }

        .u-1,
        .u-1-1,
        .u-2-2,
        .u-3-3,
        .u-4-4,
        .u-5-5 {
            flex: 0 0 100%;
        }

        .u-1-2,
        .u-2-4 {
            flex: 0 0 50%;
        }

        .u-1-3 {
            flex: 0 0 33.33%;
        }

        .u-2-3 {
            flex: 0 0 66.66%;
        }

        .u-1-4 {
            flex: 0 0 25%;
        }

        .u-3-4 {
            flex: 0 0 75%;
        }

        .u-1-5 {
            flex: 0 0 20%;
        }

        .u-2-5 {
            flex: 0 0 40%;
        }

        .u-3-5 {
            flex: 0 0 60%;
        }

        .u-4-5 {
            flex: 0 0 80%;
        }
    </style>
</head>

<body>
    <div class="grid">
        <div class="grid-cell">1/1</div>
    </div>
    <div class="grid">
        <div class="grid-cell">1/2</div>
        <div class="grid-cell">1/2</div>
    </div>
    <div class="grid">
        <div class="grid-cell">1/3</div>
        <div class="grid-cell">1/3</div>
        <div class="grid-cell">1/3</div>
    </div>
    <div class="grid">
        <div class="grid-cell">
            <div class="grid">
                <div class="grid-cell" style="background-color: lightblue;">1/3</div>
                <div class="grid-cell" style="background-color: lightblue;">1/3</div>
                <div class="grid-cell" style="background-color: lightblue;">1/3</div>
            </div>
        </div>
        <div class="grid-cell">1/2</div>
    </div>
    <div class="grid">
        <div class="grid-cell">1/4</div>
        <div class="grid-cell">1/4</div>
        <div class="grid-cell" style="flex-grow: 2;">2/4</div>
    </div>
    <div class="grid">
        <div class="grid-cell">dsg ghi dsoh dlhl doh dlsha weo ldsdsg ghi dsoh dlhl doh dlsha weo ldsdsg ghi dsoh dlhl doh dlsha weo ldsdsg ghi
            dsoh dlhl doh dlsha weo ldsdsg ghi dsoh dlhl doh dlsha weo lds</div>
        <div class="grid-cell">dsg ghi dsoh dlhl doh dlsha weo ldsdsg ghi dsoh dlhl doh dlsha weo ldsdsg ghi dsoh dlhl doh dlsha weo ldsdsg ghi
            dsoh dlhl doh dlsha weo ldsdsg ghi dsoh dlhl doh dlsha weo ldsdsg ghi dsoh dlhl doh dlsha weo ldsdsg ghi dsoh
            dlhl doh dlsha weo ldsdsg ghi dsoh dlhl doh dlsha weo ldsdsg ghi dsoh dlhl doh dlsha weo ldsdsg ghi dsoh dlhl
            doh dlsha weo lds</div>
    </div>
    <div class="grid">
        <div class="grid-cell u-1-2">1/2</div>
        <div class="grid-cell">auto</div>
        <div class="grid-cell u-1-5">1/5</div>
    </div>
    <div class="grid">
        <div class="grid-cell">auto</div>
        <div class="grid-cell u-1-3">1/3</div>
    </div>
    <div class="grid">
        <div class="grid-cell u-1-4">1/4</div>
        <div class="grid-cell">auto</div>
        <div class="grid-cell u-1-3">1/3</div>
    </div>
</body>

</html>